<template>
	<view class="container">
		<view class="yt-list" v-if="formItem.deliveryType == '1'">
			<view class="cu-form-group">
				<view class="title">自提站点</view>
				<picker @change="PickerChangeStore" :value="indexStore" :range="pickerStore">
					<view class="picker">
						{{indexStore>-1?pickerStore[indexStore]:'请选择自提站点'}}
					</view>
				</picker>
			</view>
		</view>
		<view class="cu-form-group" v-else>
			<view class="flex solid-bottom between" @click="addressAction">
				<view class="flex solid-bottom">
					<view class="padding-lg radius">
						<uni-text class="lg text-gray cuIcon-locationfill"><span></span></uni-text>
					</view>
					<view class="padding-sm margin-xs radius">
						{{addressInfo.contact}} {{addressInfo.tel}}<br>{{addressInfo.address}} {{addressInfo.no}}
					</view>
				</view>
				<view class="padding-lg radius">
					<uni-text class="lg text-gray cuIcon-right"><span></span></uni-text>
				</view>
			</view>
		</view>
		<view class="goods-section">
			<!-- 商品列表 -->
			<view class="g-item">
				<image :src="formItem.imgUrl"></image>
				<view class="right">
					<text class="title clamp">{{ formItem.name }}</text>
					<text class="spec">{{ buyInfo.selected }}</text>
					<view class="price-box">
						<text class="price">{{ price }}积分</text>
						<!-- <text class="price">￥{{buyInfo.price}}</text> -->
						<!-- <text class="number">x 1</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="yt-list">
			<view class="cu-form-group">
				<view class="title">兑换数量</view>
				<uni-number-box class="step" @eventChange="numberChange" :value="num" :min="1" :max="10"></uni-number-box>
			</view>
		</view>

		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<view class="title">已有积分</view>
				<!-- <view class="cell-icon">已有</view> -->
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ totalNum }}积分</text>
				<!-- <text class="cell-more wanjia wanjia-gengduo-d">123</text> -->
			</view>
			<view class="yt-list-cell b-b">
				<view class="title hb">使用积分</view>
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ price }}积分</text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="title lpk">剩余积分</view>
				<text class="cell-tit clamp"></text>
				<text class="cell-tip active">{{ surplus }}积分</text>
				<!-- <text class="cell-tip disabled">暂无可用优惠</text> -->
			</view>
		</view>
		<!-- 金额明细 -->
		<!-- <view class="yt-list">
			<view class="cu-form-group">
				<view class="title">用户姓名</view>
				<input class="desc" style="text-align: right;" type="text" v-model="userInfo.name" placeholder="请填写真实姓名" placeholder-class="placeholder" />
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input class="desc" style="text-align: right;" type="number" v-model="userInfo.mobile" placeholder="请填写手机号码" placeholder-class="placeholder" />
			</view>
		</view> -->

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>使用积分：</text>
				<!-- <text class="price-tip">￥</text> -->
				<text class="price">{{ price }}</text>
				<!-- <text class="price">{{buyInfo.price}}</text> -->
			</view>
			<text class="submit" @click="submitAction">立即兑换</text>
		</view>
		<view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="padding-xl">
					使用
					<span style="color: orangered;margin-left: 5px;">{{ formItem.integral * num }} 积分</span>
					<br />
					<br />
					兑换 “{{ formItem.name }}”
					<span style="color: orangered;margin-left: 5px;">x {{ num }}</span>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="cancel">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import calendar from '@/components/heqifang-calendar/calendar.vue';
import uniNumberBox from '@/components/uni-number-box.vue';
import { pickupStationMobileService,userAddressServicefindList, productInfo, insertUserIntegralReciveRecord, selectUserIntegralById, getOpenidMsg } from 'api/shop';
export default {
	components: {
		calendar,
		uniNumberBox
	},
	data() {
		return {
			indexStore:-1,
			pickerStore: ['请选择自提站点'],
			addressInfo:{
				contact:'暂无地址',
				tel:'',
				address:'请编辑收货地址',
				no:''
			},
			modalName: null,
			buyInfo: [],
			formItem: {},
			shopList: [],
			shopId: '',
			totalNum: '0',
			storeId: '',
			userInfo: {
				mobile: '',
				name: ''
			},
			surplus: '0',
			num: 1,
			price: 0,
			addressIndex:''
		};
	},
	onLoad(option) {
		if(option.index){
			this.addressIndex = option.index
		}
		this.getOpenidMsgAction();
		this.buyInfo = JSON.parse(localStorage.getItem('buyInfo'));
		console.log(this.buyInfo, '123');
		if (this.buyInfo === '' || this.buyInfo === null || this.buyInfo === undefined) {
			this.$api.msg('请重新选择商品！');
			uni.redirectTo({
				url: 'pages/index/index'
			});
			return false;
		} else {
			this.init();
		}
		console.log(this.buyInfo);
		//商品数据
		//let data = JSON.parse(option.data);
		//console.log(data);
	},
	methods: {
		PickerChangeStore(e) {
			console.log(e)
			this.indexStore = e.detail.value
			console.log(this.indexStore,'indexStore')
			// console.log(this.pickerStore)
		},
		addressAction(){
			uni.navigateTo({
				url: '/pages/address/address?createOrder=1'
			});
		},
		userAddressServicefindListAction(uid){
			userAddressServicefindList({uid:uid}).then(ret => {
				if (ret.data.errcode === 0) {
					let addressList = ret.data.data.result
					if(addressList.length > 0){
						for (var i = 0; i < addressList.length; i++) {
							if(addressList[i].isDefault === '1'){
								this.addressInfo = addressList[i]
							}
						}
						setTimeout(() => {
							if(this.addressInfo.address === '请编辑收货地址'){
								this.addressInfo = addressList[0]
							}
						}, 800)
						if(this.addressIndex != ''){
							this.addressInfo = addressList[this.addressIndex]
						}
					}
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		cancel() {
			this.modalName = '';
		},
		numberChange(data) {
			this.num = data.number;
			console.log(data, '~~~~');
			this.surplus = this.totalNum - data.number * this.formItem.integral;
			this.price = data.number * this.formItem.integral;
		},
		handle() {
			// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			let ua = window.navigator.userAgent.toLowerCase();
			// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//是微信浏览器
				window.location.href = this.$xeUtils.locat().origin + '/yq/#/handle-submit';
				// window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle';
			} else {
				window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle-app';
			}
		},
		getOpenidMsgAction() {
			getOpenidMsg().then(ret => {
				if (ret.data.errcode === 0) {
					let data = ret.data.data.result;
					if (data) {
						if (data.cardNo === null || data.cardNo === '' || data.cardNo === undefined) {
							this.handle();
						} else {
							this.userInfo = data.oauth;
							this.userAddressServicefindListAction(data.cardNo)
							this.selectUserIntegralByIdAction(data.cardNo);
						}
					} else {
						console.log('没有此人信息');
						this.handle();
					}
				} else if (ret.data.errcode === 9999 || ret.data.errcode === 9991) {
					this.handle();
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		selectUserIntegralByIdAction(idCard) {
			selectUserIntegralById({ idCard: idCard, type: '0', brandId: localStorage.getItem('brandId') }).then(ret => {
				if (ret.data.errcode === 0) {
					this.totalNum = ret.data.data.totalActivity;
					this.storeId = ret.data.data.storeId;
					this.surplus = this.totalNum - this.num * this.formItem.integral;
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		//时间戳转换
		formatDate(date) {
			var date = new Date(date);
			var YY = date.getFullYear() + '-';
			var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return YY + MM + DD;
		},
		PickerChange(e) {
			console.log(e);
			this.index = e.detail.value;
			console.log(this.index, 'index');
			console.log(this.picker);
			if (this.index !== 0 && this.index !== -1) {
				this.appointmentTime = this.picker[this.index];
				console.log(this.appointmentTime);
			}
		},
		// PickerChangeStore(e) {
		// 	console.log(e);
		// 	this.indexStore = e.detail.value;
		// 	console.log(this.indexStore, 'indexStore');
		// 	console.log(this.pickerStore);
		// 	if (this.indexStore !== 0 && this.indexStore !== -1) {
		// 		this.storeId = this.pickerStore[this.indexStore];
		// 		console.log(this.storeId);
		// 		for (var i = 0; i < this.shopList.length; i++) {
		// 			if (this.shopList[i].storeName == this.storeId) {
		// 				this.shopId = this.shopList[i].id;
		// 				this.selectReserveSettingAction(this.shopList[i].id);
		// 			}
		// 		}
		// 	}
		// },
		init() {
			productInfo({ id: this.buyInfo.productId }).then(ret => {
				if (ret.data.errcode === 0) {
					this.formItem = ret.data.data;
					this.price = ret.data.data.integral;
					uni.setNavigationBarTitle({
						title: this.formItem.name
					});
					if (ret.data.data.imgList.length > 0) {
						this.formItem.imgUrl = ret.data.data.imgList[0].url;
					}
					if(this.formItem.deliveryType == '1'){
						this.pickupStationMobileServiceAction(this.formItem.brandId)
					}
					// this.selectShopListAction(this.buyInfo.productId)
					// this.selectShopListAction(this.buyInfo.productId)
				}
			});
		},
		pickupStationMobileServiceAction(id){
			pickupStationMobileService({brandId: id}).then(ret => {
				if (ret.data.errcode === 0) {
					for (var i = 0; i < ret.data.data.result.length; i++) {
						this.pickerStore.push(ret.data.data.result[i].name+' ('+ret.data.data.result[i].address+')')
					}
				}
			});
		},
		submitAction() {
			if(this.formItem.deliveryType == '0'){
				if(this.addressInfo.address == '请编辑收货地址'){
					this.$api.msg('请添加收货地址！');
					return false;
				}
			}
			
			if(this.formItem.deliveryType == '1'){
				if(this.indexStore == -1){
					this.$api.msg('请选择自提站点！');
					return false;
				}
			}
			
			this.modalName = 'DialogModal1';
		},
		submit() {
			// console.log(this.selectedDate,'日期')
			// if(this.shopId===''||
			// 	this.shopId===undefined||
			// 	this.shopId===null){
			// 	this.$api.msg('请选择预约门店！');
			// 	return false
			// }
			// if(this.selectedDate.length===0){
			// 	this.$api.msg('请选择预约日期！');
			// 	return false
			// }
			// if (this.userInfo.mobile === '' || this.userInfo.mobile === undefined || this.userInfo.mobile === null) {
			// 	this.$api.msg('请填写手机号码！');
			// 	return false;
			// }
			let arr = new Array();
			let data = {
				spuId: this.buyInfo.productId,
				mobile: this.userInfo.mobile,
				idCard: this.userInfo.cardNo,
				brandId: this.formItem.brandId,
				storeId: this.storeId,
				name: this.formItem.name,
				amount: this.formItem.integral,
				total: this.num,
				userName: this.userInfo.name,
				supplierId:this.formItem.supplierId,
				type: '0'
			};
			
			if(this.formItem.deliveryType == '0'){
				if(this.addressInfo.address == '请编辑收货地址'){
					this.$api.msg('请添加收货地址！');
					return false;
				}else{
					data.address=this.addressInfo.address+this.addressInfo.no
				}
			}
			
			if(this.formItem.deliveryType == '1'){
				if(this.indexStore == -1){
					this.$api.msg('请选择自提站点！');
					return false;
				}else{
					data.address= this.pickerStore[this.indexStore]
				}
			}
			
			
			if (this.formItem.type !== '4') {
				data.skuId = this.formItem.skuList[0].id;
			} else {
				data.skuId = this.formItem.id;
			}
			if (this.buyInfo.skuId !== '' && this.buyInfo.skuId !== undefined && this.buyInfo.skuId !== null) {
				data.skuId = this.buyInfo.skuId;
				data.goodsName = this.formItem.name + '(' + this.buyInfo.selected + ')';
			}
			arr.push(data);
			
			console.log('最终结果',arr)
			insertUserIntegralReciveRecord({ list: arr }).then(ret => {
				if (ret.data.errcode === 0) {
					this.$api.msg('兑换成功！');
					uni.switchTab({
						url: '/pages/user/user',
					});
				} else {
					this.modalName = '';
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
.padding-xl {
	text-align: center;
}
.container {
	padding: 0 10px 10px 10px;
}
page {
	background: $page-color-base;
	padding-bottom: 100upx;
}

.address-section {
	padding: 30upx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90upx;
		color: #888;
		font-size: 44upx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.name {
		font-size: 34upx;
		margin-right: 24upx;
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32upx;
		color: $font-color-light;
		margin-right: 30upx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5upx;
	}
}

.goods-section {
	margin-top: 16upx;
	background: #fff;
	padding-bottom: 1px;

	.g-header {
		display: flex;
		align-items: center;
		height: 84upx;
		padding: 0 30upx;
		position: relative;
	}

	.logo {
		display: block;
		width: 50upx;
		height: 50upx;
		border-radius: 100px;
	}

	.name {
		font-size: 30upx;
		color: $font-color-base;
		margin-left: 24upx;
	}

	.g-item {
		display: flex;
		margin: 20upx 30upx;
		padding-top: 20upx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: $font-color-dark;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: $font-color-dark;
			padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
				color: #fa436a;
			}
			.number {
				font-size: 26upx;
				color: $font-color-base;
				margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}
}
.yt-list {
	margin-top: 16upx;
	background: #fff;
}

.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;
	.title {
		color: #f85e52;
	}

	.hb {
		color: #ffaa0e;
	}

	.lpk {
		color: #3ab54a;
	}

	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 64upx;
		font-size: 22upx;
		color: #fff;
		text-align: center;
		line-height: 32upx;
		background: #f85e52;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: $font-color-light;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: $font-color-light;
		margin-right: 10upx;
	}

	.cell-tip {
		font-size: 26upx;
		color: $font-color-dark;

		&.disabled {
			color: $font-color-light;
		}

		&.active {
			color: $base-color;
		}
		&.red {
			color: $base-color;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: $font-base;
		color: $font-color-dark;
	}
}

/* 支付列表 */
.pay-list {
	padding-left: 40upx;
	margin-top: 16upx;
	background: #fff;
	.pay-item {
		display: flex;
		align-items: center;
		padding-right: 20upx;
		line-height: 1;
		height: 110upx;
		position: relative;
	}
	.icon-weixinzhifu {
		width: 80upx;
		font-size: 40upx;
		color: #6bcc03;
	}
	.icon-alipay {
		width: 80upx;
		font-size: 40upx;
		color: #06b4fd;
	}
	.icon-xuanzhong2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60upx;
		height: 60upx;
		font-size: 40upx;
		color: $base-color;
	}
	.tit {
		font-size: 32upx;
		color: $font-color-dark;
		flex: 1;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90upx;
	justify-content: space-between;
	font-size: 30upx;
	background-color: #fff;
	z-index: 99;
	color: $font-color-base;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.price-content {
		padding-left: 30upx;
	}
	.price-tip {
		color: $base-color;
		margin-left: 8upx;
	}
	.price {
		font-size: 36upx;
		color: $base-color;
	}
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 280upx;
		height: 100%;
		color: #fff;
		font-size: 32upx;
		background-color: $base-color;
	}
}

/* 优惠券面板 */
.mask {
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9995;
	transition: 0.3s;

	.mask-content {
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: 0.3s;
		overflow-y: scroll;
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.mask-content {
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item {
	display: flex;
	flex-direction: column;
	margin: 20upx 24upx;
	background: #fff;
	.con {
		display: flex;
		align-items: center;
		position: relative;
		height: 120upx;
		padding: 0 30upx;
		&:after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #f3f3f3;
			transform: scaleY(50%);
		}
	}
	.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		height: 100upx;
	}
	.title {
		font-size: 32upx;
		color: $font-color-dark;
		margin-bottom: 10upx;
	}
	.time {
		font-size: 24upx;
		color: $font-color-light;
	}
	.right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: $font-color-base;
		height: 100upx;
	}
	.price {
		font-size: 44upx;
		color: $base-color;
		&:before {
			content: '￥';
			font-size: 34upx;
		}
	}
	.tips {
		font-size: 24upx;
		color: $font-color-light;
		line-height: 60upx;
		padding-left: 30upx;
	}
	.circle {
		position: absolute;
		left: -6upx;
		bottom: -10upx;
		z-index: 10;
		width: 20upx;
		height: 20upx;
		background: #f3f3f3;
		border-radius: 100px;
		&.r {
			left: auto;
			right: -6upx;
		}
	}
}
.appointment-date-item::after {
	font-family: cuIcon;
	display: block;
	content: '\e6a3';
	position: absolute;
	font-size: 17px;
	color: #8799a3;
	line-height: 50px;
	width: 30px;
	text-align: center;
	top: 0;
	bottom: 0;
	right: -10px;
	margin: auto;
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: $uni-color-primary;
			font-size: $font-base + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
.uni-numbox {
	position: inherit;
}
.text-green,
.line-green,
.lines-green {
	color: #fa436a;
}
.bg-green {
	background-color: #fa436a;
}
.cuIcon-locationfill,.cuIcon-right{
	font-size: 1.5rem;
}
.padding-lg{
	padding: 20px 0;
}
.flex.solid-bottom.between{
	width: 100%;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
</style>
